<script setup lang="ts">
import { ref } from 'vue'
import {GussBigQuestionGenner, GussNumQuestionGenner} from "@/control/question_genner";
import {GussBigChecker, GussNumChecker, IChecker} from "@/control/checker";
import {IQuestion} from "@/model/question";

enum State {
  Running,
  None,
}

const state = ref(State.None)
let checker:IChecker|null = null
let question: IQuestion| null = null
const msg = ref("")
const answer = ref("")

function initCommon() {
  console.log(question)
  msg.value = ""
  answer.value = ""
}

const onGussNumClick = () => {
  const genner = new GussNumQuestionGenner()
  checker = new GussNumChecker()
  question = genner.gen()

  state.value = State.Running
  initCommon();
}

const onGussBigClick = () => {
  const genner = new GussBigQuestionGenner()
  checker = new GussBigChecker()
  question = genner.gen()
  state.value = State.Running
  initCommon();
}

const onClick=()=>{
  const  check = checker!.check({
    answer: answer.value
  }, question!)

    msg.value = check.msg
    if (check.isSuccess){
      state.value = State.None
    }
}
</script>

<template>
  <div>
    <div v-if="state === State.None">
      <button @click="onGussNumClick()">猜数字</button>
      <button @click="onGussBigClick()">猜大小</button>
    </div>
    <div v-else>
      <input type="text" v-model="answer">
      <button @click="onClick">确定</button>
      <div>{{ msg }}</div>
    </div>

  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
